<template>
  <div>
     <div>
      <div style="display: flex;justify-content: space-between;"> 
        <el-alert
            :title="`你有${tobeTaskCount} 条数据待审批`"
            type="success"
            show-icon>
          </el-alert>
          <div>
            <el-button type="primary" @click="toOpenMap">打卡范围</el-button>
            <el-button type="success">设置</el-button>
          </div>
        </div>
        <!-- 打卡范围设置 -->
        <attendMap :drawers="true" ref="attendMap"></attendMap>

        <div style=" height:50px;display: flex; margin:20px 0; align-items: center;"> 
          <div>
             部门:
          </div>
          <div>
            <el-checkbox-group v-model="checkedCities1">
              <el-checkbox label="">人事部</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
         <div>
          考勤状态:
          <el-radio-group>
             <el-radio label="">正常</el-radio>
              <el-radio label="">旷工</el-radio>
              <el-radio label="">请假</el-radio>
              <el-radio label="">迟到</el-radio>
              <el-radio label="">早退</el-radio>
          </el-radio-group>

        </div>
        
     </div>

     <div style="margin-top:20px">
      <el-table :data="attendList" border
     >

        <el-table-column type="index"  label="序号" width="50">
         
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180"></el-table-column>
          <el-table-column prop="workNumber" label="工号"></el-table-column>
          <el-table-column  label="部门" prop="departmentName"></el-table-column>
          <el-table-column  label="手机" prop="mobile"></el-table-column>
          <el-table-column v-for="(item,index) in days" :label="nowMonth+'/'+item">
              <template #default="{row}">
                <div @click="toAttends(row.attendanceRecord[index].adtStatu)">

                  {{changeSta(row.attendanceRecord[index].adtStatu)}}
                </div>
              </template>
          </el-table-column>
      </el-table>
      <el-pagination layout="prev,pager,next" background 
      @current-change="pageChange" :total="total" :page-size="queryForm.pageSize" :current-page="queryForm.page"></el-pagination>
     </div>
     <el-dialog title="选择考勤类型" :visible.sync="attendFlag" width="40%">
        <el-link type="danger">注：统计考勤时，异常状态优先正常状态</el-link>
        <div>
          <el-radio-group v-model="vacat">
            <el-radio style="margin-top:20px;" v-for="item in vacationtype" :label="item.id" :value="item.id">{{item.name}}</el-radio>
          </el-radio-group>
        </div>
        <template #footer>
          <div>
              <el-button type="primary">确定</el-button>
              <el-button type="danger">取消</el-button>
          </div>
        </template>
     </el-dialog>
  </div>
</template>
<script>
import attendMap from './child/attendMap.vue';
import {getAttendanceList} from '@/api/attendance'
import attendMix from './attendMixins'
export default {
  name: 'attendIndex',
  components:{attendMap},
  mixins:[attendMix],
  data() {
    return {
      vacat:"",//单选框组的v-model
      attendFlag:false,//考勤类型弹出层
      checkedCities1:[],
        nowMonth:new Date().getMonth()+1,
        days:30,
        queryForm:{
          page:1,
          pageSize:10
        },
        tobeTaskCount:0,//待审批的数据数量
        attendList:[],//考勤列表
        total:0,//数据总条数
        
    };
  },
  created(){
    if(this.nowMonth==1||this.nowMonth==3||this.nowMonth==5||this.nowMonth==7||this.nowMonth==8||this.nowMonth==10||this.nowMonth==12){
      this.days=31
    }else if(this.nowMonth==2){
      let nowYear=new Date().getFullYear()
        if(nowYear%4==0&&nowYear%100!=0||nowYear%400==0){
          this.days=29
        }else{
          this.days=28
        }
    }else{
      this.days=30
    }
    this.getAttendList();
  },
  mounted() {
    
  },

  methods: {
    toOpenMap(){ //控制考勤范围弹出层
      this.$refs.attendMap.drawer=true;

    },
    toAttends(sta){ //点击单元格 进行考勤的 更改
      console.log(sta,"-----------")
      this.vacat=""+sta;//给弹出层的 单选回显
      this.attendFlag=true;
    },
    changeSta(sta){
      // sta  1 2 3 4 
      // 使用混入的数据的方法 过滤
      let obj=this.vacationtype.find(item=>item.id==sta)
      if(obj){
           return obj.name
      }else{
        return ''
      }
   
    },
    // 获取考勤列表数据
    async getAttendList(){
      let res=await getAttendanceList(this.queryForm)

      this.tobeTaskCount=res.data.tobeTaskCount
      this.attendList=res.data.data.rows
      this.total=res.data.data.total;
    },
    pageChange(){

    }
  },
};
</script>